<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>陈爱莲</title>
    <link rel="stylesheet" href="./font_2455283_0zmy9prhfol/iconfont.css">
</head>
<body>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

    ul {
           list-style: none;
       }
       body{
           overflow-x: hidden;
           -webkit-tap-highlight-color:transparent;
           -webkit-text-size-adjust:none;
           max-width: 90%;
           min-width: 320px;
           margin:0 auto;
           background:#fafafc;
           font-size: 12px;
       }
       div{
           box-sizing: border-box;
       }
       p{
           margin:0;
        
       }
       ul{
           list-style: none;
           margin: 0;
           padding:0;
       }
       a{
           text-decoration: none;
       }
       /* 顶部 */
       .short-search{
            position:fixed;
            z-index: 50;
            top:0;
            width:100%;
            max-width: 90%;
            height:50px;
            background-color: pink;
            background: -webkit-linear-gradient(top,rgba(78,77,77,0.4),rgba(109,106,106,0.2));
        }
         /* 内容 */
         .user{
            display: flex;
            flex-direction: column;
            align-items: center;
            position: absolute;
            top:0;
            right:0;
            width:51px;
            height:44px;
        }
        .user-icon{
            width:22px;
            height:22px;
            background: url(./images/jing2.png) no-repeat 1px -36px;
            background-size: 21px auto;
            margin:3px 0;
        }
        .user span{
            flex:1;
            color:#eee;
        }
        /* 搜索 */
        .search{
            position: absolute;
            left:5px;
            width:85%;
            height:28px;
            background-color: #fff;
            border-radius: 20px;
            margin:8px;
        }
        .search p{
            line-height: 28px;
            padding-left: 36px;
            color:#aaa;
            font-size: 14px;
        }
        .search p::before{
            content:"";
            position: absolute;
            top:0;
            left:0;
            width:35px;
            height:28px;
            background: url(./images/jing2.png) no-repeat 15px 7px;
            background-size:21px auto;
        }
        /* 横幅 */
        .banner{
            display: block;
            width:100%;
            position:relative;
            overflow: hidden;
            z-index: -1;
        }
        .banner img{
            width:100%;
            height:50%;
            margin-top:-50px;
            vertical-align: top;
        }
           /* 头部导航 */
           .local-nav{
            display: flex;
            height:64px;
            margin: -70px 12px 10px;
            background-color: #fff;
            border-radius: 10px;
            padding:8px;

        }
        .local-nav li{
            flex:1;
        }
        .local-nav a{
            flex:1;
            display:flex;
            flex-direction: column;
            align-items: center;

        }
        .local-nav a [class^="local-nav-icon-"] {
            width:40px;
            height:40px;
            background-color: pink;
            background: url(./images/精灵图.png) no-repeat 0 0;
            background-size:40px auto;
            margin-bottom: 3px;
        }
        .local-nav a .local-nav-icon-icon2{
            background-position: 0 -40px;
        }
        .local-nav a .local-nav-icon-icon3{
            background-position: 0 -80px;
        }
        .local-nav a .local-nav-icon-icon4{
            background-position: 0 -120px;
        }
        .local-nav a .local-nav-icon-icon5{
            background-position: 0 -160px;
        }
        .local-nav li .local-nav-iconContent{
            color:#222;
            line-height: 1;
        } 

/* 导航条 */

        .nav{
            width: 90%;
            height: 197.56px;
            margin: 10px auto;
            border-radius: 8px;
            overflow: hidden;
        }
        .nav .hang{
            width: 100%;
            height: 66.19px;
            display: flex;
            /* border-bottom: 1px solid #fff; */
        }
        .hang .lie{
            flex:23%;
            line-height:66.91px;
            border-right: 1px solid #fff;
            box-sizing: border-box;
            text-align:center;
        }
       
        .nav .lie:last-child{
            border: none;
        }
        .hang  .lie:nth-child(1){
            flex: 31%
        }
        .nav .a{
                background: linear-gradient(to right,#fa5956,#fb8650 54%)
                }
        
       .nav .a .lie:last-child{
            flex: 48%;
            background: linear-gradient(to right,#ffbc49,#ffb252);
        }
        .nav .a .lie:first-child{
            background: url(./images/1..png) no-repeat right bottom;
            background-size: 73px auto;
            border-top-left-radius: 8px;
        }
        .nav .a .lie:nth-child(2){
            background: url(./images/2.png) no-repeat left bottom;
            background-size: 37px auto;
        }
        .nav .a .lie:last-child a{
            /* padding: 0rem 0; */
            display: block;
            background: url(./images/3.png) no-repeat right bottom;
            /* box-sizing: 100% auto; */
            text-align: center;
            position: relative;
            width: 100%;
            color: #a05416;
    
        }
        .nav .b{
            background: linear-gradient(to right,#4b8fed,#53bced);
        }
        .nav .b .lie:first-child{
            background: url(./images/4.png) no-repeat right bottom;
           background-size: 79px auto;
        }
        .nav .b .lie:nth-child(2){
            background: url(./images/5.png) no-repeat left bottom;
           background-size: 37px auto;
        }
        .nav .c{
            background: linear-gradient(to right,#34c2aa,#6cd557);
        }
        .nav .c .lie:first-child{
            background: url(./images/6.png) no-repeat right bottom;
            background-size: 94px auto;
            border-bottom-left-radius: 8px;
        }
        .nav .c .lie:nth-child(2){
            background: url(./images/7.png)no-repeat left bottom;
            background-size: 61px auto;
        }

        .nav a{
             color: #fff; 
            text-decoration: none;
        }
        .b{
            margin: 1px 0;
        }
        
        /* .hang .lie{
            flex: 23%;
            line-height: 66.19px;
            border-right: 1px solid #fff ;
            box-sizing: border-box;
            text-align: center;
        }
         */
       
        /* 导航条2 */
        
        .nav2{
            width: 90%;
            height: 110.06px;
            margin: 10px auto;
            display: flex;
            /* background-color: #fff; */
            flex-wrap: wrap;
            /* text-align:center; */
        }
       .nav2 li {
           flex: 20%;
           display: flex;
          justify-content: center;

        }
        .nav2 li a{
            text-decoration: none;
            color: #222;
            font-size: 12px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .subnav-icon{
            width: 28px;
            height: 28px;
            background-repeat: no-repeat;
            display: block;
            background: url("./images/长图.png");
            background-size:28px ;
        }
        .s1{
            background-position: 0 -28px;
        }
        .s2{
            background-position: 0 -56px;
        }
        .s3{
            background-position: 0 -84px;
        }
        .s4{
            background-position: 0 -112px;
        }
        .s5{
            background-position: 0 -140px;
        }
        .s6{
            background-position: 0 -168px;
        }
        .s7{
            background-position: 0 -196px;
        }
        .s8{
            background-position: 0 -224px;
        }
        .s9{
            background-position: 0 -252px;
        }
/* 底部导航条 */
        .footer{
            width:100%;
            height:60px;
            margin:10px autotrhek16y w4u9y;
            display: flex;

        }
        .footer a{
            flex:1;
            display:flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            color:#333;
        }
       
    </style>
</head>
<body>

<!-- 顶部 -->
<div class="short-search">
    <div class="search">
        <p>搜索：目的地/酒店/景点/航班号</p>
    </div>
    <div class="user">
        <span class="user-icon"></span>
        <span>我的</span>
        </div>
</div>

<!-- 横幅 -->
<div class="banner">
    <a href="#">
        <img src="./images/大图.jpg">
    </a>
</div>
<!-- 头部导航条 -->
<ul class="local-nav">
    <li>
        <a href="#">
            <span class="local-nav-icon-icon1"></span>
            <span class="local-nav-iconContent">景点·攻略</span>
        </a>
    </li>
    <li>
        <a href="#">
            <span class="local-nav-icon-icon2"></span>
            <span class="local-nav-iconContent">门票·玩乐</span>
        </a>
    </li>
    <li>
        <a href="#">
            <span class="local-nav-icon-icon3"></span>
            <span class="local-nav-iconContent">美食林</span>
        </a>
    </li>
    <li>
        <a href="#">
            <span class="local-nav-icon-icon4"></span>
            <span class="local-nav-iconContent">周边游</span>
        </a>
    </li>
    <li>
        <a href="#">
            <span class="local-nav-icon-icon5"></span>
            <span class="local-nav-iconContent">一日游</span>
        </a>
    </li>
</ul>
<!-- 导航条 -->
    <div class=" nav">
        <div class="hang a">
            <div class="lie"><a href="javascript:;"><span>酒店</span></a></div>
            <div class="lie"><a href="javascript:;"><span>名宿·客栈</span></a></div>
            <div class="lie"><a href="javascript:;"><span>特价·爆款</span></a></div>
            
        </div>
        <div class="hang b">
            <div class="lie"><a href="javascript:;"><span>机票</span></a></div>
            <div class="lie"><a href="javascript:;"><span>火车票</span></a></div>
            <div class="lie"><a href="javascript:;"><span>汽车·船票</span></a></div>
            <div class="lie"><a href="javascript:;"><span>专车·租车</span></a></div>
        </div>
        <div class="hang c">
            <div class="lie"><a href="javascript:;"><span>旅游</span></a></div>
            <div class="lie"><a href="javascript:;"><span>私家团</span></a></div>
            <div class="lie"><a href="javascript:;"><span>邮轮游</span></a></div>
            <div class="lie"><a href="javascript:;"><span>定制游</span></a></div>
        </div>

    </div>
    
<!-- 导航条2 -->
    <ul class="nav2">
        <li>
            <a href="javascript:;">
                <span class="subnav-icon"></span>
                <span>自由行</span>
            </a>
        </li>
        
        
         <li>
            <a href="javascript:;">
                <span class="subnav-icon s1"></span>
                <span>wifi电话卡</span>
            </a>
        </li>
        
        <li>
            <a href="javascript:;">
                <span class="subnav-icon s2"></span>
                <span>保险·签证</span>
            </a>
        </li>
        <li>
            <a href="javascript:;">
                <span class="subnav-icon s3"></span>
                <span>换钞·购物</span>
            </a>
        </li>
        <li>
            <a href="javascript:;">
                <span class="subnav-icon s4"></span>
                <span>向导·包车</span>
            </a>
        </li>
        <li>
            <a href="javascript:;">
                <span class="subnav-icon s5"></span>
                <span>特价机票</span>
            </a>
        </li>
        <li>
            <a href="javascript:;">
                <span class="subnav-icon s6"></span>
                <span>礼品卡</span>
            </a>
        </li>
        <li>
            <a href="javascript:;">
                <span class="subnav-icon s7"></span>
                <span>申卡·借钱</span>
            </a>
        </li>
        <li>
            <a href="javascript:;">
                <span class="subnav-icon s8"></span>
                <span>社区</span>
            </a>
        </li>
        <li>
            <a href="javascript:;">
                <span class="subnav-icon s9"></span>
                <span>更多</span>
            </a>
        </li>
    </ul>

<!-- 底部导航条 -->
    <div class="footer">
        <a href="javascript：；">
            <span class="iconfont icon-dianhua"></span>
            <span>电话</span>
        </a> 
        <a href="javascript：；">
            <span class="iconfont icon-xiazai"></span>
            <span>下载</span>
        </a> 
        <a href="javascript：；">
            <span class="iconfont icon-wode"></span>
            <span>我的</span>
        </a> 
       </div>

      
      
    </div>
</head>
    </body>
</body>
</html>